<template>
    <div>
        <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form validate-first @submit="onSubmit">
            <van-field v-model="nickname" name="nickname" required label="昵称" placeholder="请输入昵称"
                :rules="[{ required: true, message: '请填写昵称' }]">
            </van-field>
            <van-field v-model="phone" required label="手机号" name="phone" placeholder="请输入手机号" :rules="telRules" />
            <!-- <van-field v-model="sms" name="authcode" center required clearable label="验证码" placeholder="请输入验证码"
                :border="false" use-button-slot>
                <van-button slot="button" size="small" type="primary" @click="gainCode">{{ time }}</van-button>
            </van-field> -->
            <!-- 通过 validator 进行函数校验 -->
            <!-- <van-field readonly name="verify" required :value="verifyval" label="验证" placeholder="点击验证" @click="showPopup"
                :rules="verify">
            </van-field> -->

            <van-field v-model="password" required label="密码" name="password" placeholder="请输入密码"
                :rules="[{ validator, message: '请输入8-16位字母加数字' }]" />
            <van-field v-model="password2" required name="password2" label="确认密码" placeholder="再次输入密码"
                :rules="[{ validator: passwordverify, message: '两次输入密码不一致' }]" />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
        <van-popup v-model="show" :style="{ height: '27%', width: '80%' }">
            <slide-verify ref="slideblock" @again="onAgain" @fulfilled="onFulfilled" @success="onSuccess" @fail="onFail"
                @refresh="onRefresh" :accuracy="accuracy" :slider-text="text">
            </slide-verify>
        </van-popup>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            show: false,
            verifyval: '',
            text: '向右滑',
            // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
            accuracy: 1,
            nickname: "",
            password: '',
            password2: '',
            isClick: true,
            time: '获取验证码',
            phone: '',
            sms: '',
            estimate: false,
            verify: [{
                required: true,
                message: '请验证',
                trigger: blur,
            }],
            telRules: [{
                required: true,
                message: '手机号不能为空',
                trigger: blur,
            }, {
                validator: value => {
                    return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
                        .test(value)
                },
                message: '请输入正确的手机号格式',
                trigger: 'onBlur',
            },
            {
                validator: async () => {
                    let res = await this.$frontaxios.post(this.$front.postPhoneVerify, { phone: this.phone })
                    if (res.code == 1) {
                        return true
                    } else {
                        return false
                    }
                },
                message: '手机号已注册',
                trigger: 'onBlur',
            }
            ]
        };
    },
    methods: {
        onSuccess(times) {
            //    console.log('验证通过，耗时 +' times + '毫秒');
            this.msg = 'login success, 耗时${(times / 1000).toFixed(1)}s'
            this.verifyval = '验证通过'
            this.show = false
        },
        onFail() {
            console.log('验证不通过');
        },
        onRefresh() {
            console.log('点击了刷新小图标');
        },
        onFulfilled() {
            console.log('刷新成功啦！');
        },
        onAgain() {
            console.log('检测到非人为操作的哦！');
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
            // 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset();
        },

        validator(val) {
            return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val);
        },
        passwordverify(val) {
            return new Promise((resolve) => {
                resolve(this.password == val);
            });
        },
        // 获取验证码
        async gainCode() {
            if (this.isClick) {
                if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)) {
                    const res = await sendVerifyCode({ phone: this.phone })  // 获取验证码接口
                    this.isClick = false
                    let s = 60
                    this.time = s + 's'
                    let interval = setInterval(() => {
                        s--
                        this.time = s + 's'
                        if (s < 0) {
                            this.time = '重新获取'
                            this.isClick = true
                            clearInterval(interval)
                        }
                    }, 1000)
                } else {
                    Toast.fail('请输入正确的手机号码')
                }
            }
        },
        async onSubmit(form) {
            console.log(form);
            let res = await this.$frontaxios.post(this.$front.postRegisterUser, form);
            console.log(res);
            if (res.code == 1) {
                this.$notify({ type: 'success', message: '注册成功' });
                setTimeout(() => {
                    this.$router.push({ name: "my" })
                }, 1000);
            }
            //console.log(res);
        },
        //点击返回按钮返回上一页
        onClickLeft() {
            this.$router.back()
        },
        showPopup() {
            this.show = true;
        }
    }
}

</script>

<style></style>